<template>
  <div class="app-container">
    <el-form :inline="true" style="float: right;padding-right: 80px;">
      <el-form-item>
        <router-link to="/new-project">
          <el-button type="primary">新增项目</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <main-list ref="main-list" :fields="main_list_fields" :page-size="page_size" :page-no="page_no" :total="total">
      <template v-slot:urls="scope">
        <a :href="scope.row.axure">
          <el-link v-show="scope.row.axure" type="primary">在线原型</el-link>
        </a>
        <a :href="scope.row.preview">
          <el-link v-show="scope.row.preview" type="primary">项目预览</el-link>
        </a>
        <el-link type="primary" @click="view_api(scope.row)">接口文档</el-link>
      </template>
      <template v-slot:action="scope">
        <el-link type="danger" @click="del(scope.row.project_id)">删除</el-link>
      </template>
    </main-list>
  </div>
</template>

<script>
import mainList from '@/components/main-list/index'
import main_list_fields from './configs/main-list'
import { find_list, project_del } from './api'

export default {
  components: {
    mainList
  },
  data: function() {
    return {
      table: [],
      main_list_fields,
      page_size: 20,
      page_no: 1,
      total: 0
    }
  },
  created() {
    this.render()
  },
  methods: {
    render() {
      find_list().then((res) => {
        this.$refs['main-list'].render(res)
      })
    },
    del(project_id) {
      this.$confirm('确认删除吗', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'danger'
      }).then((ret) => {
        // 用户确认
        project_del().then(() => {

        })
      }).catch(() => {
        // 用户取消
      })
    },
    // 查看api
    view_api(row) {
      this.$router.push({
        path: '/api/index',
        query: {
          spaceid: row.spaceid,
          type: row.client_type,
          project_id: row.project_id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
